<!DOCTYPE html>
<html lang="zh-ch">

<head>
  <meta charset="utf-8" />
  <meta name="author" content="Kodinger" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>My Login Page</title>
  <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css" />
  <style>
    html,
    body {
      height: 100%;
    }

    body.my-login-page {
      background-color: #f7f9fb;
      font-size: 14px;
    }

    .my-login-page .brand {
      width: 90px;
      height: 90px;
      overflow: hidden;
      border-radius: 50%;
      margin: 40px auto;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
      position: relative;
      z-index: 1;
    }

    .my-login-page .brand img {
      width: 100%;
    }

    .my-login-page .card-wrapper {
      width: 400px;
    }

    .my-login-page .card {
      border-color: transparent;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    }

    .my-login-page .card.fat {
      padding: 10px;
    }

    .my-login-page .card .card-title {
      margin-bottom: 30px;
    }

    .my-login-page .form-control {
      border-width: 2.3px;
    }

    .my-login-page .form-group label {
      width: 100%;
    }

    .my-login-page .btn.btn-block {
      padding: 12px 10px;
    }

    .my-login-page .footer {
      margin: 40px 0;
      color: #888;
      text-align: center;
    }

    @media screen and (max-width: 425px) {
      .my-login-page .card-wrapper {
        width: 90%;
        margin: 0 auto;
      }
    }

    @media screen and (max-width: 320px) {
      .my-login-page .card.fat {
        padding: 0;
      }

      .my-login-page .card.fat .card-body {
        padding: 15px;
      }
    }
  </style>
</head>

<body class="my-login-page">
  <section class="h-100">
    <div class="container h-100">
      <div class="row justify-content-md-center h-100">
        <div class="card-wrapper">
          <div class="brand">
            <img src="/img/logo_1.jpg" alt="logo" />
          </div>
          <div class="card fat">
            <div class="card-body">
              <h4 class="card-title">登录</h4>
              <form method="POST" class="my-login-validation" novalidate="">
                <div class="form-group">
                  <label for="username">用户名</label>
                  <input id="username" class="form-control" name="username" value="" required autofocus />
                  <div class="invalid-feedback">您的用户名不合法</div>
                </div>

                <div class="form-group">
                  <label for="password">密码
                    <a href="forgot" class="float-right"> 忘记密码 </a>
                  </label>
                  <input id="password" type="password" class="form-control" name="password" required data-eye />
                  <div class="invalid-feedback">密码错误</div>
                </div>

                <div class="form-group">
                  <div class="custom-checkbox custom-control">
                    <input type="checkbox" name="remember" id="remember" class="custom-control-input" />
                    <label for="remember" class="custom-control-label">记住密码</label>
                  </div>
                </div>

                <div class="form-group m-0">
                  <button type="button" onclick="ajax_post()" class="btn btn-primary btn-block">登录</button>
                </div>
                <div class="mt-4 text-center">还没有账户？ <a href="register">创建一个</a></div>
              </form>
            </div>
          </div>
          <div class="footer">Copyright &copy; 2017 &mdash; Your Company</div>
        </div>
      </div>
    </div>
  </section> 
  <!-- 模态框 -->
  <div>
    <button type="button" class="btn btn-primary modal_button d-none" data-toggle="modal"
      data-target="#exampleModal"></button>
    <div class="modal fade" id="exampleModal" tabindex="-1">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-body">
            输入不能为空
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">关闭</button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <script src="/js/jquery.min.js"></script>
  <script src="/js/bootstrap.bundle.min.js"></script>
  <script>
    function ajax_post() {
      var username = $("#username").val();
      var password = $("#password").val();
      // 提交前判断是否为空
      if (is_empty(username, password)) {
        return
      }
      $.ajax({
        url: "/api/login",
        data: { username, password },
        type: "POST",
        dataType: "json",
        success: function (data) {
          if (data.error) {
            $("#password+.invalid-feedback").css("display", "block")
          } else {
            localStorage.setItem("username", data.result.username);
            window.location.href = "/";
          }
        },
        error: function (error) {
          $("#password+.invalid-feedback").css("display", "block")
        }
      });
    }
    // 判断是否为空，为空弹窗
    function is_empty() {
      for (var index in arguments) {
        if (arguments[index] == "") {
          $(".modal_button").click()
          return true
        }
      }
      return false
    }
  </script>
</body>

</html>